import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import IndexGoods from './components/IndexGoods/IndexGoods'
import Banner from './components/Banner/Banner'
import GetNew from './components/GetNew/GetNew';

import {connect} from 'react-redux'
import { bindActionCreators } from 'redux';
import { actions, getBanner, getGoods, getN, getnew } from "../../store/modules/home"

class Home extends Component {
  
  componentDidMount() {
    let {
      home: { reqBanner, reqGoods, reqnew },
    } = this.props;
    reqBanner()
    reqGoods()
    reqnew()
  }
  render() {
    let { indexgoods,banner,getnew,n,home: { changeN }} = this.props;

    return (
      <div>
        <Header title='首页'></Header>
        {/* 新人 */}
        <GetNew getnew={getnew}></GetNew>
        {/* 轮播 */}
        <Banner banner={banner}></Banner>
         {/* 商品信息 */}
        <IndexGoods indexgoods={indexgoods} n={n} changeN={(n)=>changeN(n)}></IndexGoods>
      </div>
    )
  }
}

const mapStateToProps = (state) =>{
  return {
    banner: getBanner(state),
    indexgoods: getGoods(state),
    n: getN(state),
    getnew: getnew(state)
  }
};
const mapDispatchToProps = (dispatch) =>{
  return {
    home:bindActionCreators(actions,dispatch)
  }
};

export default connect(mapStateToProps,mapDispatchToProps)(Home)
